<template>
  <uni-popup ref="popup" type="center" :mask-click="false">
    <view class="MsgDialog-container" v-if="msg">
      <view class="bg"></view>
      <image src="http://down.qwdata.vip/app_icon/1677255694028" class="bg-img"></image>
      <image src="http://down.qwdata.vip/app_icon/1677255710102" class="icon"></image>
      <view class="body">
        <image src="../static/guanbi@3x.png" @click="close" class="close-icon"></image>
        <view class="title">{{ msg.title }}</view>
        <view class="content">{{ msg.content }}</view>
        <template v-if="msg.href">
          <view class="btn confirm" @click="toDetail">{{ msg.confirmText || '查看详情' }}</view>
          <view class="btn" v-if="msg.cancelText" @click="close">{{ msg.cancelText || '稍后再说' }}</view>
        </template>
        <view class="btn confirm" v-else @click="close">{{ msg.confirmText || '知道啦' }}</view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'MsgDialog',
  data() {
    return {
      msg: null
    }
  },
  mounted() {
  },
  methods: {
    open(msg) {
      this.msg = msg
      this.$refs.popup.open()
    },
    close() {
      this.$refs.popup.close()
      this.msg = null
    },
    toDetail() {
      uni.navigateTo({
        url: this.msg.href
      });
      this.close()
    },

    startPoll() {

    }
  }
}
</script>

<style scoped lang='scss'>
.MsgDialog-container {
  width: 554upx;
  position: relative;
  padding-top: 1px;

  .bg {
    position: absolute;
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
  }

  .bg-img {
    position: absolute;
    width: 554upx;
    height: 208upx;
    left: 0;
    top: 0;
    z-index: -1;
  }

  .icon {
    position: absolute;
    z-index: 1;
    width: 190upx;
    height: 190upx;
    left: 182upx;
    top: -85upx;
  }

  .close-icon {
    width: 24upx;
    height: 24upx;
    position: absolute;
    right: 25upx;
    top: 25upx
  }

  .body {
    padding: 20upx 46upx;
    margin-top: 100upx;

    .title {
      font-size: 18px;
      color: #1A1D2E;
      text-align: center;
      font-weight: bold;
      margin-bottom: 30upx;
      margin-top: 15upx;
    }

    .content {
      color: #1E2131;
      font-size: 15px;
      line-height: 26px;
      text-align: center;
      margin-bottom: 60upx;
    }
  }

  .btn {
    width: 462upx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #888;
    height: 54upx;
    margin-bottom: 10px;

    &.confirm {
      background-color: #2d90fc;
      border-radius: 50px;
      height: 94upx;
      color: #fff;
    }
  }
}
</style>
